<template>
  <div class="card-box">
    <div>
      <h3>物流列表：</h3>
      <span class="tag" v-for="item in expressList" :key="item">{{ item }} </span>
    </div>
    <br>
    <div>
      <h3>操作：</h3>
      物流ID：<input type="text" v-model="expressId" placeholder="示例：YD">&nbsp;
      物流公司：<input type="text" v-model="expressName" placeholder="示例：韵达">
      <button class="pull-right" @click="addNewExpress">添 加</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expressId: '',
      expressName: '',
      expressList: ['ZT-中通', 'YT-圆通', 'SF-顺丰']
    }
  },
  methods: {
    addNewExpress() {
      if (this.expressId && this.expressName) {
        this.expressList.push(this.expressId + '-' + this.expressName)
      }
    }
  }
}
</script>

<style>

</style>